<template>
  <el-dialog
    :visible.sync="visible"
    lock-scroll
    :custom-class="isPage?'over-device-page':'dialog-offset'"
    :close-on-click-modal="false"
    :before-close="onOverDeviceClose"
    :fullscreen="isPage"
    width="450px"
    top="85px">
    <template #title>
      <span class="xz-confirm-title">
        <svg-icon :iconClass="appCfg.logo"/>
        {{appCfg.name}}
      </span>
    </template>
    <div class="over-device-title">
      <svg-icon iconClass="error" />
      <span>{{$t('login.limitDevices',{num:userInfo.max_allow_device})}}</span>
    </div>
    <div class="over-device-box">
      <el-checkbox-group v-model="deviceCheckList" class="over-device-list">
        <el-checkbox v-for="item in deviceList" :key="item.id" :label="item.id" class="over-device-item flex-center">
          <div class="flex-center">
            <svg-icon :iconClass="item.terminal===1?'device-pc':'device-phone'" />
            <div class="over-device-info">
              <div class="device-name">{{item.device_name}}</div>
              <div class="device-time">{{$t('login.lastTime')}} {{item.timeStr}} {{item.ip_location?`，${item.ip_location}`:''}}</div>
            </div>
          </div>
        </el-checkbox>
      </el-checkbox-group>
    </div>
    <div class="confirm-btn-wrap" slot="footer">
      <el-button
        type="primary"
        size="small" :disabled="deviceCheckList.length<userInfo.need_del_device" @click="onDelDevice">{{$t('confirm')}}</el-button>
      <el-button @click="onOverDeviceClose"
        size="small">{{$t('cancel')}}</el-button>
    </div>
  </el-dialog>
</template>

<script type="text/javascript">
import { mapGetters } from 'vuex'
import { delDevice, refreshToken } from '@/api/login'
import { getDeviceList } from '@/api/user'
import mixins from './mixins'
export default {
  name: 'OverDeviceDialog',
  props: {
    isPage: Boolean
  },
  mixins: [mixins],
  data () {
    return {
      deviceDialog: false,
      deviceCheckList: [],
      deviceList: []
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'appInfo', 'appCfg']),
    visible: {
      get () {
        return this.isPage || this.deviceDialog
      },
      set (val) {
        this.deviceDialog = val
      }
    }
  },
  created () {
    if (this.isPage) {
      this.$xz('xz_set_window_size', 'XZDesktopDevice', 450 + 30, 336 + 30)
      const query = this.$route.query
      query.isAutoLogin = query.isAutoLogin === 'true'
      this.$store.dispatch('user/setToken', query.code)
      this.$store.dispatch('user/setUserInfo', query)
      this.showDeviceDialog()
      this.$xz('xz_page_load_finished', 'XZDesktopDevice')
    }
  },
  methods: {
    showDeviceDialog () {
      this.$xz('xz_substat_action', 2425)
      getDeviceList({ 'uuid': this.appInfo.uuid }).then(res => {
        const list = []
        const now = new Date()
        for (const item of res.data) {
          if (item.device_id !== this.appInfo.uuid) {
            const d = new Date(item.updated_at)
            const diff = (now - d) / 1000
            if (diff < 3600 * 24) {
              item.timeStr = '＜' + Math.ceil(diff / 3600) + this.$t('login.hourAgo')
            } else {
              item.timeStr = Math.ceil(diff / 3600 / 24) + ' ' + this.$t('login.dayAgo')
            }
            list.push(item)
          } else {
            this.device_name = item.device_name
          }
        }
        this.deviceList = list
      })
      this.deviceDialog = true
    },
    onDelDevice () {
      delDevice({ name: this.device_name, id: this.deviceCheckList }).then(() => {
        refreshToken({
          authCode: this.userInfo.code,
          uuid: this.appInfo.uuid,
          appID: process.env.VUE_APP_ID,
          appSecret: process.env.VUE_APP_SECRET
        }).then(res => {
          const data = res.data || {}
          data.isAutoLogin = this.userInfo.isAutoLogin
          data.loginType = this.userInfo.loginType
          this.$xz('xz_substat_action', 2426)
          this.$store.dispatch('user/setToken', data.token)
          this.$store.dispatch('user/getUserInfo').then(info => {
            this.onLoginFinish({
              isAutoLogin: data.isAutoLogin,
              loginType: data.loginType,
              code: data.token,
              expire: data.expire,
              svr_time: data.svr_time,
              uid: info.user_id,
              user_name: info.Nickname,
              head_image: info.Portrait
            }, () => {
              this.isPage && this.$xz('xz_switch_dialog', 'XZDesktopDevice', false)
              this.deviceCheckList = []
              this.deviceDialog = false
            })
          })
        })
      })
    },
    onOverDeviceClose (done) {
      this.$PsMessageBox({
        iconClass: 'warning',
        confirmButtonText: this.$t('login.logoutConfirm'),
        cancelButtonText: this.$t('login.chooseAgain'),
        confirmButtonClass: 'cancel',
        cancelButtonClass: 'el-button--primary',
        message: this.$t('login.confirmTips', { num: this.userInfo.max_allow_device })
      }).then(() => {
        this.$store.dispatch('user/logout').finally(() => {
          this.isPage && this.$xz('xz_switch_dialog', 'XZDesktopDevice', false)
        })
        this.deviceDialog = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.over-device-title{
  display: flex;
  align-items: center;
  .svg-icon{
    font-size: 32px;
  }
  span{
    margin-left: 10px;
    color: #fff;
    word-break: break-word;
  }
}
.over-device-box{
  margin-top: 12px;
  padding: 22px 4px;
  border-radius: 4px;
  background-color: #494A4F;
  .over-device-list{
    height: 110px;
    padding: 0 20px;
    overflow: auto;
  }
  .over-device-item{
    margin-bottom: 10px;
    &:last-child{
      margin-bottom: 0;
    }
    .svg-icon{
      margin-right: 5px;
      font-size: 30px;
    }
    .device-name{
      width: 290px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      line-height: 18px;
      color: #fff;
    }
    .device-time{
      line-height: 16px;
      color: #999;
      margin-top: 4px;
    }
  }
  ::-webkit-scrollbar {
    background-color: #494A4F;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2);
  }
  ::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background: rgba(255,255,255,.3);
  }
}
</style>
<style lang="scss">
.over-device-page{
  box-shadow: none;
  border: 0;
  border-radius: 0;
}
</style>
